<!DOCTYPE html>
<html>
<head>
    <title>TweenJS: Simple Tween Demo</title>

	<link rel="stylesheet" href="assets/demoStyles.css" />
	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>

	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

    <script>
        var canvas;
        var stage;

        function init() {
	        if (window.top != window) {
                document.getElementById("header").style.display = "none";
            }

            canvas = document.getElementById("testCanvas");
            stage = new createjs.Stage(canvas);
            stage.autoClear = true;

            var ball = new createjs.Shape();
            ball.graphics.setStrokeStyle(5, 'round', 'round');
            ball.graphics.beginStroke(('#000000'));
            ball.graphics.beginFill("#FF0000").drawCircle(0,0,50);
            ball.graphics.endStroke();
            ball.graphics.endFill();
            ball.graphics.setStrokeStyle(1, 'round', 'round');
            ball.graphics.beginStroke(('#000000'));
            ball.graphics.moveTo(0,0);
            ball.graphics.lineTo(0,50);

            ball.graphics.endStroke();
            ball.x = 200;
            ball.y = -50;

            var tween = createjs.Tween.get(ball, {loop:true})
                         .to({x:ball.x, y:canvas.height - 55, rotation:-360}, 1500, createjs.Ease.bounceOut)
                         .wait(1000)
                         .to({x:canvas.width-55, rotation:360}, 2500, createjs.Ease.bounceOut)
                         .wait(1000).call(handleComplete)
                         .to({scaleX:2, scaleY:2, x:canvas.width - 110, y:canvas.height-110}, 2500, createjs.Ease.bounceOut)
                         .wait(1000)
                         .to({scaleX:.5, scaleY:.5, x:30, rotation:-360, y:canvas.height-30}, 2500, createjs.Ease.bounceOut);

            stage.addChild(ball);

			createjs.Ticker.addListener(window);
        }

        function handleComplete(tween) {
            var ball = tween._target;

        }
        function tick() {
            stage.update();
        }


    </script>
	<link rel="stylesheet" href="assets/demoStyles.css"/>
</head>
<body onload="init();" >

<div class="canvasHolder">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Tween<strong>JS</strong></span> Simple Tween Demo</h1>
	    <p>This example shows TweenJS in action.</p>
	</header>

    <canvas id="testCanvas" width="960" height="400"></canvas>

</div>

</body>
</html>